<template>
	<view>
		<Header title="报告详情" :showBack="true"></Header>
		<view class="container">
			<!-- 质量报告 -->
			<view class="quality-list">
				<view class="list" v-if="list.length>0">
					<block v-for="(item,index) in list" :key="index">
						<view class="item">
							<view class="remark">{{item.fileDate?item.fileDate.split(' ')[0]:''}}{{item.remark||''}}</view>
							<view class="picture-box" @click="previewImage(item.pictureId)" v-if="item.materialTypeFlag != 3">
								<image :src="baseUrl + '/file/api/uploadFile/downloadByKey?id=' + item.pictureId" class="img" mode="aspectFill"></image>
								<view class="click-show">点击预览</view>
							</view>
							<view class="picture-box" @click="getImg(item.pictureId)" v-if="item.materialTypeFlag == 3">
								<image src="/static/PDF.png" class="img" mode="widthFix"></image>
								<view class="click-show">点击预览</view>
							</view>
						</view>
					</block>
				</view>
				<view class="quesheng" v-else>暂无数据~</view>
			</view>
			<!-- 上架中奶品 -->
			<view class="putshop-list"></view>
		</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return {
				baseUrl:getApp().globalData.baseUrl,
				startTime: '',
				endTime: '',
				tenantId: uni.getStorageSync('info').tenantId,
				list: [],
				curPage: 1,
				limit: 15,
				isQingqiu: false
			}
		},
		onLoad(options) {
			this.getList(options.time,options.idx)
		},
		onReachBottom() {
			if (this.isQingqiu) {
				this.isQingqiu = false
				this.getList()
			}
		},
		methods:{
			getImg(id){
				uni.downloadFile({
				  url: `${this.baseUrl}/file/api/uploadFile/downloadByKey?id=${id}`,
				  success: function (res) {
				    var filePath = res.tempFilePath;
				    uni.openDocument({
				      filePath: filePath,
				      showMenu: true,
				      success: function (res) {
				        console.log('打开文档成功');
				      }
				    });
				  }
				});
			},
			getList(time,idx){
				this.$http('/systemSetting/api/tenantPicture/list1',{
					condition:{
						startFileDate: time,
						endFileDate: time,
						tenantId: this.tenantId,
						typeFlag: idx
					},
					page: this.curPage,
					pageNum: this.curPage,
					pageSize: this.limit,
					rows: this.limit,
				},res=>{
					if (res.data.items.length > 0) {
						this.list.push(...res.data.items)
						
						if (res.data.items.length == this.limit) {
							this.curPage++
							this.isQingqiu = true
						}
					}
				})
			},
			
			goContent(e){
				uni.navigateTo({
					url: '/pages/filesList/qualityDetial?obj='+ e
				})
			},
			bindTimeChange(e, x) {
				if (x == 1) {
					this.startTime = e.detail.value
				} else if (x == 2) {
					this.endTime = e.detail.value
				}
				this.curPage = 1
				this.list = []
				this.getList()
			},
			setTime() {
				let date = new Date();
				this.endTime = date.toISOString().split('T')[0];
				date.setDate(1);
				this.startTime = date.toISOString().split('T')[0];
			},
			previewImage(picId){
				uni.previewImage({
					urls: [this.baseUrl + '/file/api/uploadFile/downloadByKey?id=' + picId],
					current: 0
				})
			},
		},
	}
</script>

<style scoped>
	view,image,text{box-sizing: border-box;}
	.nav{
		height: 88upx;
		width: 100%;
		background: #fff;
		display: flex;
		align-items: center;
		margin-bottom: 20upx;
	}
	.nav .item{
		width: 375upx;
		height: 88upx;
		text-align: center;
		line-height: 88upx;
		position: relative;
		font-size: 28upx;
	}
	.nav .item.on .line{
		width: 100upx;
		height: 6upx;
		background: #2BAC6B;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -50upx;
	}
	.quality-list{
		width: 100%;
		padding: 30upx;
		background: #fff;
		border-radius: 16upx;
		/* box-shadow: 0 0 15upx rgba(247, 200, 122, .2); */
		box-shadow: 0 3upx 20upx 1upx rgba(247, 200, 122, .2);
	}
	.quality-list .list{ display: flex; flex-wrap: wrap; justify-content: space-between; }
	.quality-list .list .item{ width: 284upx; margin-bottom: 54upx; }
	.quality-list .list .item .remark{ 
		width: 100%;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;			
		text-overflow: ellipsis;		
		display: -webkit-box;			
		-webkit-line-clamp: 2;			
		line-clamp: 2;					
		-webkit-box-orient: vertical;
		margin-bottom: 26upx;
		height: 86upx;
		font-size: 26upx;
	}
	.quality-list .list .item .picture-box{
		width: 284upx;
		height: 160upx;
		border-radius: 6upx;
		position: relative;
		overflow: hidden;
	}
	.quality-list .list .item .picture-box .img{
		width: 100%;
	}
	.quality-list .list .item .picture-box .click-show{
		width: 100%;
		height: 42upx;
		line-height: 42upx;
		border-radius: 0 6upx 6upx 0;
		position: absolute;
		bottom: 0;
		left: 0;
		text-align: center;
		color: #fff;
		background: rgba(0,0,0,.6);
		font-size: 24upx;
	}
	.quality-list .list .item .picture-box .num{
		color: #fff;
		background: rgba(0,0,0,.6);
		font-size: 24upx;
		position: absolute;
		right: 0;
		top: 0;
		padding: 6upx 10upx;
		border-top-right-radius: 6upx;
	}
	.date-box{
		display:flex;
		align-items: center;
		justify-content: center;
		font-size: 26upx;
		margin-bottom: 30upx;
	}
	.date-box .date{
		display: flex;
		align-items: center;
		background: #F7F7F7;
		border-radius: 40upx;
		border: 1px solid #e2e2e2;
		padding: 10upx 26upx;
	}
	.date-box .date image{
		width: 20upx;
		height: 20upx;
		transform: rotate(90deg);
		margin-left: 14upx
	}
	.date-box .date-center{
		margin: 0 12upx;
	}
	.quesheng{
		color: #999;
		width: 100%;
		text-align: center;
		margin: 200upx auto;
	}
	
	
</style>
